<template>

  <div>
    <teleport to="body">
      <!--蒙版-->
      <transition name="fade">
        <div v-if="isVisable" class="w-screen h-screen bg-zinc-900/80 z-40 fixed top-0 left-0"
             @click="isVisable = false"></div>
      </transition>
      <!--内容-->
      <transition name="popup-down-up">
        <div v-if="isVisable" v-bind="$attr" class="w-screen bg-white z-50 fixed bottom-0">
          <slot></slot>
        </div>
      </transition>
    </teleport>
  </div>
</template>

<script setup>
import {useScrollLock, useVModel} from "@vueuse/core";
import {watch} from "vue";

const props = defineProps({
  modelValue: {
    required: true,
    type: Boolean
  }
})
//响应式数据,当值发生变化时，会自动触发emit修改modelValue
const isVisable = useVModel(props)
//锁定滚动
const isLocked = useScrollLock(document.body)
watch(() => isVisable, (val) => {
      isLocked.value
    }, {
      immediate: true
    }
)
</script>

<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: all 0.3s;
}

/**
 *准备进入和离开完成
 */
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

.popup-down-up-enter-active, popup-down-up-leave-active {
  transition: all 0.3s;
}

.popup-down-up-enter-from, popup-down-up-leave-to {
  transform: translateY(100%);
}


</style>
